<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局容器</title>
    <link rel="stylesheet" type="text/css" href="layui-v2.9.6/layui/css/layui.css" />
</head>

<body>
    <!-- 容器布局 -->
    <div class="layui-container">
        <!-- 定义行 -->
        <div class="layui-row">
            <!-- 定义列 -->
            <div class="layui-col-md5" style="background-color: deepskyblue;">
                内容5/12
            </div>
            <div class="layui-col-md7" style="background-color: bisque;">
                内容7/12
            </div>
        </div>
        <!-- 定义行 -->
        <div class="layui-row">
            <div class="layui-col-md4" style="background-color: powderblue;">
                内容4/12
            </div>
            <div class="layui-col-md4" style="background-color: mediumaquamarine;">
                内容4/12
            </div>
            <div class="layui-col-md6" style="background-color: mediumaquamarine;">
                内容6/12
            </div>
        </div>
    </div>

    <br />

    <!-- 响应式 -->
    <h3>响应式</h3>
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="grid-demo grid-demo-bg1">xs:6/12 | sm:6/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <div class="grid-demo layui-bg-red">xs:6/12 | sm:6/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            <div class="grid-demo layui-bg-blue">xs:4/12 | sm:12/12 | md:4/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            <div class="grid-demo layui-bg-green">xs:4/12 | sm:7/12 | md:8/12</div>
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            <div class="grid-demo layui-bg-black">xs:4/12 | sm:5/12 | md:4/12</div>
        </div>
    </div>

    <br />

    <!-- 列边距 -->
    <h3>列边距</h3>
    <div class="layui-row layui-col-space1">
        <div class="layui-col-md3">
            <div style="background-color: rebeccapurple;">1/4</div>
        </div>
        <div class="layui-col-md3">
            <div style="background-color: red;">1/4</div>
        </div>
        <div class="layui-col-md3">
            <div style="background-color: blue;">1/4</div>
        </div>
        <div class="layui-col-md3">
            <div style="background-color: mediumaquamarine;">1/4</div>
        </div>
    </div>

    <div class="layui-row layui-col-space5">
        <div class="layui-col-md4">
            <div style="background-color: rebeccapurple;">1/3</div>
        </div>
        <div class="layui-col-md4">
            <div style="background-color: red;">1/3</div>
        </div>
        <div class="layui-col-md4">
            <div style="background-color: mediumaquamarine;">1/3</div>
        </div>
    </div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">
            <div style="background-color: rebeccapurple;">9/12</div>
        </div>
        <div class="layui-col-md3">
            <div style="background-color: red;">3/12</div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md7">
            <div style="background-color: green;">7/12</div>
        </div>
        <div class="layui-col-md5">
            <div style="background-color: orangered;">5/12</div>
        </div>
    </div>

    <div class="layui-row layui-col-space30">
        <div class="layui-col-md7">
            <div style="background-color: blueviolet;">7/12</div>
        </div>
        <div class="layui-col-md5">
            <div style="background-color: peru;">5/12</div>
        </div>
    </div>
    <br />

    <!-- 列偏移 -->
    <h3>列偏移</h3>
    <div class="layui-row">
        <div class="layui-col-md4" style="background-color: rebeccapurple;">4</div>
        <div class="layui-col-md4 layui-col-md-offset4" style="background-color: red;">向右偏移4列</div>
    </div>
</body>

</html>